<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title></title>
    <script>
        // https://w3c.hexschool.com/flexbox/9883b0fb
    </script>
</head>
<body>
<div style="">
    <div class="bg-gray flex flex-start">
        <!-- add: flex-shrink-0  -->
        <div class="h-12 w-12  rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10" style="">
            <!-- Heroicon name: outline/exclamation -->
<!--            <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"-->
<!--                 stroke="currentColor" aria-hidden="true">-->
<!--                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"-->
<!--                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>-->
<!--            </svg>-->
            <span>sd</span>
        </div>
        <div>
            <h1> Are you sure you want to deactivate your account? All of your data will be permanently removed. This
                action cannot be undone. Are you sure you want to deactivate your account? All of your data will be
                permanently removed. This action cannot be undone. Are you sure you want to deactivate your account? All
                of your data will be permanently removed. This action cannot be undone. </h1>

        </div>
    </div>

    <hr>

    <div style="width: 600px">
        <div class="flex">
            <div class="bg-red-200"  style="flex-grow: 1; flex-basis: 100px">1</div>
            <div class="bg-blue-200"  style="flex-grow: 2; flex-basis: 100px">1</div>
        </div>
    </div>

    <div style="width: 300px">
        <div class="flex">
            <div class="bg-red-200"  style="flex-grow: 1; ">1</div>
            <div class="bg-blue-200"  style="flex-grow: 2; ">1</div>
        </div>
    </div>

        <p>flex-basis超过最大元素，会基于flex-shrink比例进行压缩，默认是1 所以效果是平分</p>

    <div style="width: 300px">
        <div class="flex">
            <div class="bg-red-200"  style="flex-grow: 1; flex-basis: 400px">1</div>
            <div class="bg-blue-200"  style="flex-grow: 2;  flex-basis: 400px">1</div>
        </div>
    </div>

    <p>flex-basis超过最大元素大会平分 flex-basis是类似于除法的比例，数值越大，缩放的使元素宽度越小
        <br>
        flex-grow是放大的比例（在父元素的范围内放大），类似于乘法，数值越大使元素的宽度越大
    </p>
    <div style="width: 300px; overflow: hidden">
        <div class="flex">
            <div class="bg-red-200"  style="flex-grow: 1; flex-shrink: 1; flex-basis: 400px">1</div>
            <div class="bg-blue-200"  style="flex-grow: 2;  flex-shrink: 0; flex-basis: 400px">1</div>
        </div>
    </div>




</div>

</body>
</html>